import { Dropdown, Input, Table, message } from "antd"
import { CustomIcon, Title } from "../../components"
import styles from './index.module.less'
import { FunnelPlotOutlined, SearchOutlined } from "@ant-design/icons"
import { CSSProperties, useEffect, useRef, useState } from "react"
type MENU_ITEM_TYPE = { name: string, total: number, type?: 'all' }
const iconStyle: CSSProperties = {
    fontSize: '17px',
    marginRight: '1rem',
}

const Collection = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState<any[]>([{ name: 123 }, { name: 123 }, { name: 123 }, { name: 123 }, { name: 123 }, { name: 123 }])
    const [inputVisible, setInputVisible] = useState<boolean>(false);
    const inputRef: any = useRef(null);
    useEffect(() => {
        loadMoreData()
    }, []);
    const inputStyle: CSSProperties = {
        width: inputVisible ? 200 : 0,
        position: 'relative',
        marginRight: -16,
        opacity: inputVisible ? 1 : 0,
        pointerEvents: inputVisible ? 'auto' : 'none'
    }
    const defaultData: MENU_ITEM_TYPE[] = [{
        name: '全部收藏',
        total: 8,
        type: 'all'
    }, {
        name: '嘿嘿',
        total: 8,
    }, {
        name: 'test',
        total: 8,
    }]
    const items = [
        {
            key: 'all',
            label: '所有收藏',
            onClick: () => {

            },
        },
        {
            key: 'text',
            label: '文档',
            onClick: () => {

            },
        },
        {
            key: 'text',
            label: '表格',
            onClick: () => {

            },
        },
        {
            key: 'text',
            label: '画板',
            onClick: () => {

            },
        },
        {
            key: 'text',
            label: '文件夹',
            onClick: () => {

            },
        },
    ]
    const toggleInputVisibility = () => {
        setInputVisible((prev) => !prev);
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: '40%',
        },
        {
            title: '类型',
            dataIndex: 'gender',
            key: 'gender',
            width: '20%'
        },
        {
            title: '收藏时间',
            dataIndex: 'name',
            key: 'name',
            width: '30%',
            sorter: (a: { name: string | any[] }, b: { name: string | any[] }) => a.name.length - b.name.length,
        },
        {
            title: '',
            dataIndex: 'email',
            key: 'email',
        },
    ]
    const loadMoreData = () => {
        if (loading) {
            return;
        }
        setLoading(true);
        fetch('https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo')
            .then((res) => res.json())
            .then((body) => {
                setDataSource([...dataSource, ...body.results]);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };
    const MenuItem = ({ item }: { item: MENU_ITEM_TYPE }) => (<div className={styles.menuItem}>
        <div className={styles.menuHeadBox}>
            <div className={styles.menuHeadName}>{item.name}</div>
            <div onClick={() => { console.log(item.name) }}>
                <CustomIcon style={{ fontSize: 18 }} str={item.type ? 'add-line' : 'more-2-fill'} />
            </div>
        </div>
        <div className={styles.menuTotal}>{item.total}条内容</div>
    </div>)
    return <div className={styles.collectionBox}>
        <div className={styles.titleBox}>
            <Title level={4} title='收藏' />
            <div className={styles.filterBox}>
                <Input
                    prefix={<SearchOutlined />}
                    allowClear
                    ref={inputRef}
                    onBlur={() => setInputVisible(false)}
                    // onPressEnter={}// 回车
                    placeholder="搜索"
                    style={inputStyle}
                />
                <SearchOutlined onClick={toggleInputVisibility} style={iconStyle} />
                <Dropdown
                    menu={{
                        items,
                        // selectable: true,
                        onSelect: () => { },
                        selectedKeys: ['all']
                    }}
                    placement="top"
                >
                    <FunnelPlotOutlined style={iconStyle} />
                </Dropdown>
            </div>
        </div>
        <div className={styles.contentBox}>
            <div className={styles.contentLeftBox}>
                <div className={styles.menuListBox}>
                    {defaultData.map((item: MENU_ITEM_TYPE, index: number) => {
                        return <MenuItem key={index} item={item} />
                    })}
                </div>
            </div>
            <div className={styles.contentRightBox}>
                <Table loading={loading} onScroll={(e: any) => {
                    const tableBody = e.target;
                    const isBottom = tableBody.scrollTop + tableBody.clientHeight === tableBody.scrollHeight;
                    if (isBottom) {
                        console.log('表格已滚动到底部');
                        // 在这里执行滚动到底部的逻辑，如加载更多数据
                        if (dataSource.length < 50) {
                            return loadMoreData()
                        } else {
                            message.warning({
                                content: '没有更多数据了',
                                duration: 1,
                            })
                        }
                    }
                }} scroll={{ y: `calc(100vh - ${160}px)` }} pagination={false} size='large'
                    dataSource={dataSource}
                    columns={columns} />
            </div>
        </div>
    </div>
}

export default Collection